<style>
    .showJstree span {
        cursor: pointer;
    }
    .r-ifm {
        width: 100%;
    }
</style>
<div class="row">
    <div class="col-md-2 col-12">
        <div class="card card-primary">
            <div class="card-body">
                <p class="showJstree">
                    <span class="openAll">&nbsp;<i class="fas fa-caret-square-right"></i> {:lang("Expand,folding")}</span>
                    <button class="btn btn-secondary btn-xs float-right" onclick="getCategory()" type="button" name="refresh" aria-label="Refresh" title="{:lang("Refresh")}">
                        <i class="fa fa-sync"></i>
                    </button>
                </p>
                <div class="frm-category"></div>
            </div>
        </div>
    </div>
    <div class="col-md-10 col-12">
        <div class="card card-primary">
            <div class="card-body" style="padding: 0">
                <iframe src="{:url('/cms.content/show')}" frameborder="0" id="iframe1" class="r-ifm"></iframe>
            </div>
        </div>
    </div>
</div>

{block:script}

<script>
    require(['jquery','jstree','layer'], function ($, undefined, undefined) {
        $(function () {
            getCategory();

            let bl = false;
            $('.openAll').click(function (e) {
                $(".frm-category").jstree(bl===true ? "open_all" : "close_all");
                bl = !bl;
            });

            $('.r-ifm').height(($('body').height()-55)+'px');
        })
    })

    function getCategory() {
        Util.ajax({
            url:'{:url("/cms.Category/getCategoryJstree")}?id=1'
        },'',function (data) {
            $('.frm-category').jstree("destroy");
            $('.frm-category').jstree({ "core":{"data":data,"multiple":false},"state":{"opened":true}}).on('loaded.jstree', function(e, data){
                var inst = data.instance;
                var obj = inst.get_node(e.target.firstChild.firstChild.lastChild);
                inst.select_node(obj);
            });

            $('.frm-category').on('changed.jstree', function (e, data) {
                var url = data.instance.get_node(data.selected[0]).data.to_url;
                $('.r-ifm').attr('src', url);
            });
        });
        return false;
    }
</script>
{/block:script}